<template>
  <div>
    <city-header></city-header>
    <city-search :cities = "cities"></city-search>
    <city-list :cities = "cities" :hotCities= "hotCities" :alphabet= "alphabet"></city-list>
    <city-alphabet :cities = "cities"  @getAlphabetVal= "getAlphabetVal" ></city-alphabet>
  </div>
</template>
<script>
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'
import CityAlphabet from './components/Alphabet.vue'
export default {
  name:'city',
  components:{
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  mounted(){
    this.getCityInfo()
  },
  data(){
    return{
      cities:{},
      hotCities:[],
      alphabet:''
    }
  },
  methods:{
    getAlphabetVal(val){
      this.alphabet = val
    },
    getCityInfo(){
      this.$axios.get('/api/city.json')
      .then((res) =>{
        res = res.data
        if(res.ret){
          this.cities = res.data.cities
          this.hotCities = res.data.hotCities
        }
      }).catch((err) =>{
        console.log(err)
      })
    }
  }
}
</script>
<style lang="less" scoped>
  
</style>